<template>
    <div>
        <page-header title="培育计划" content="Cultivation plan" />
        <page-main>
            <h2>当前您的专业为： {{major.major_name}}（{{major.education}}）</h2>
            <h2>
                <el-alert
                    title="注意：培育计划只展示必修课和专业选修课的课程！"
                    type="warning">
                </el-alert>
            </h2>
        </page-main>
        <page-main >
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="11">
                    <el-card  header="大一（上学期）" style="font-size: 30px; color: #409eff;">
                        <!--table需要的data：screenWidth、show-->
                        <el-table
                            :key="show"
                            ref="refTable"
                            v-model="tableData"
                            :data="tableData"
                            style="width: 100%;"
                            tooltip-effect="dark"
                            :border="true"
                            :row-key="show?getRowKey:''"
                            @row-click="clickTable"
                        >

                            <!--<el-table-column-->
                            <!--    v-if="show"-->
                            <!--    type="selection"-->
                            <!--    min-width="55"-->
                            <!--    align="center"-->
                            <!--/>-->
                            <el-table-column
                                label="序号"
                                width="50"
                                type="index"
                                :index="indexMethod"
                                align="center"
                            />
                            <el-table-column
                                prop="course_name"
                                label="课程名称"
                                min-width="120"
                                align="center"
                            />
                            <el-table-column
                                prop="course_nature"
                                label="课程性质"
                                min-width="90"
                                show-overflow-tooltip
                                align="center"
                            />
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="11">
                    <el-card header="大一（下学期）" style="font-size: 30px; color: #ffb86c;">
                        <!--table需要的data：screenWidth、show-->
                        <el-table
                            v-if="isRouterAlive"
                            :key="show"
                            ref="refTable"
                            :data="tableData2"
                            style="width: 100%;"
                            tooltip-effect="dark"
                            :border="true"
                            :row-key="show?getRowKey:''"
                            @row-click="clickTable"
                        >
                            <!--<el-table-column-->
                            <!--    v-if="show"-->
                            <!--    type="selection"-->
                            <!--    min-width="55"-->
                            <!--    align="center"-->
                            <!--/>-->
                            <el-table-column

                                label="序号"
                                width="50"
                                type="index"
                                :index="indexMethod"
                                align="center"
                            />
                            <el-table-column
                                prop="course_name"
                                label="课程名称"
                                min-width="120"
                                align="center"
                            />
                            <el-table-column

                                prop="course_nature"
                                label="课程性质"
                                min-width="90"
                                show-overflow-tooltip
                                align="center"
                            />
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
            <el-divider content-position="left">大二</el-divider>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="11">
                    <el-card header="大二（上学期）" style="font-size: 30px; color: #409eff;">
                        <!--table需要的data：screenWidth、show-->
                        <el-table
                            :key="show"
                            ref="refTable"
                            :data="tableData3"
                            style="width: 100%;"
                            tooltip-effect="dark"
                            :border="true"
                            :row-key="show?getRowKey:''"
                            @row-click="clickTable"
                        >

                            <!--<el-table-column-->
                            <!--    v-if="show"-->
                            <!--    type="selection"-->
                            <!--    min-width="55"-->
                            <!--    align="center"-->
                            <!--/>-->
                            <el-table-column

                                label="序号"
                                width="50"
                                type="index"
                                :index="indexMethod"
                                align="center"
                            />
                            <el-table-column
                                prop="course_name"
                                label="课程名称"
                                min-width="120"
                                align="center"
                            />
                            <el-table-column

                                prop="course_nature"
                                label="课程性质"
                                min-width="90"
                                show-overflow-tooltip
                                align="center"
                            />
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="11">
                    <el-card header="大二（下学期）" style="font-size: 30px; color: #ffb86c;">
                        <!--table需要的data：screenWidth、show-->
                        <el-table
                            :key="show"
                            ref="refTable"
                            :data="tableData4"
                            style="width: 100%;"
                            tooltip-effect="dark"
                            :border="true"
                            :row-key="show?getRowKey:''"
                            @row-click="clickTable"
                        >

                            <!--<el-table-column-->
                            <!--    v-if="show"-->
                            <!--    type="selection"-->
                            <!--    min-width="55"-->
                            <!--    align="center"-->
                            <!--/>-->
                            <el-table-column

                                label="序号"
                                width="50"
                                type="index"
                                :index="indexMethod"
                                align="center"
                            />
                            <el-table-column
                                prop="course_name"
                                label="课程名称"
                                min-width="120"
                                align="center"
                            />
                            <el-table-column

                                prop="course_nature"
                                label="课程性质"
                                min-width="90"
                                show-overflow-tooltip
                                align="center"
                            />
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
            <el-divider content-position="left">大三</el-divider>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="11">
                    <el-card header="大三（上学期）" style="font-size: 30px; color: #409eff;">
                        <!--table需要的data：screenWidth、show-->
                        <el-table
                            :key="show"
                            ref="refTable"
                            :data="tableData5"
                            style="width: 100%;"
                            tooltip-effect="dark"
                            :border="true"
                            :row-key="show?getRowKey:''"
                            @row-click="clickTable"
                        >

                            <!--<el-table-column-->
                            <!--    v-if="show"-->
                            <!--    type="selection"-->
                            <!--    min-width="55"-->
                            <!--    align="center"-->
                            <!--/>-->
                            <el-table-column
                                label="序号"
                                width="50"
                                type="index"
                                :index="indexMethod"
                                align="center"
                            />
                            <el-table-column
                                prop="course_name"
                                label="课程名称"
                                min-width="120"
                                align="center"
                            />
                            <el-table-column
                                prop="course_nature"
                                label="课程性质"
                                min-width="90"
                                show-overflow-tooltip
                                align="center"
                            />
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="11">
                    <el-card header="大三（下学期）" style="font-size: 30px; color: #ffb86c;">
                        <!--table需要的data：screenWidth、show-->
                        <el-table
                            :key="show"
                            ref="refTable"
                            :data="tableData6"
                            style="width: 100%;"
                            tooltip-effect="dark"
                            :border="true"
                            :row-key="show?getRowKey:''"
                            @row-click="clickTable"
                        >
                            <!--<el-table-column-->
                            <!--    v-if="show"-->
                            <!--    type="selection"-->
                            <!--    min-width="55"-->
                            <!--    align="center"-->
                            <!--/>-->
                            <el-table-column
                                label="序号"
                                width="50"
                                type="index"
                                :index="indexMethod"
                                align="center"
                            />
                            <el-table-column
                                prop="course_name"
                                label="课程名称"
                                min-width="120"
                                align="center"
                            />
                            <el-table-column
                                prop="course_nature"
                                label="课程性质"
                                min-width="90"
                                show-overflow-tooltip
                                align="center"
                            />
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
            <el-divider content-position="left">大四</el-divider>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="11">
                    <el-card header="大四（上学期）" style="font-size: 30px; color: #409eff;">
                        <!--table需要的data：screenWidth、show-->
                        <el-table
                            :key="show"
                            ref="refTable"
                            :data="tableData7"
                            style="width: 100%;"
                            tooltip-effect="dark"
                            :border="true"
                            :row-key="show?getRowKey:''"
                            @row-click="clickTable"
                        >

                            <!--<el-table-column-->
                            <!--    v-if="show"-->
                            <!--    type="selection"-->
                            <!--    min-width="55"-->
                            <!--    align="center"-->
                            <!--/>-->
                            <el-table-column
                                label="序号"
                                width="50"
                                type="index"
                                :index="indexMethod"
                                align="center"
                            />
                            <el-table-column
                                prop="course_name"
                                label="课程名称"
                                min-width="120"
                                align="center"
                            />
                            <el-table-column
                                prop="course_nature"
                                label="课程性质"
                                min-width="90"
                                show-overflow-tooltip
                                align="center"
                            />
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="11">
                    <el-card header="大四（下学期）" style="font-size: 30px; color: #ffb86c;">
                        <!--table需要的data：screenWidth、show-->
                        <el-table
                            :key="show"
                            ref="refTable"
                            :data="tableData8"
                            style="width: 100%;"
                            tooltip-effect="dark"
                            :border="true"
                            :row-key="show?getRowKey:''"
                            @row-click="clickTable"
                        >
                            <!--<el-table-column-->
                            <!--    v-if="show"-->
                            <!--    type="selection"-->
                            <!--    min-width="55"-->
                            <!--    align="center"-->
                            <!--/>-->
                            <el-table-column
                                label="序号"
                                width="50"
                                type="index"
                                :index="indexMethod"
                                align="center"
                            />
                            <el-table-column
                                prop="course_name"
                                label="课程名称"
                                min-width="120"
                                align="center"
                            />
                            <el-table-column
                                prop="course_nature"
                                label="课程性质"
                                min-width="90"
                                show-overflow-tooltip
                                align="center"
                            />
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>

        </page-main>
    </div>
</template>

<script>
import PageMain from '../../components/PageMain/index'
import api from '../../api'
export default {
    name: 'cultivation.plan',
    components: {PageMain},
    inject: ['reload'],
    data() {
        return {
            isRouterAlive: true,
            show: false,
            major: [],
            major_id: 0,
            tableData: [{}],
            tableData2: [{}],
            tableData3: [{}],
            tableData4: [{}],
            tableData5: [{}],
            tableData6: [{}],
            tableData7: [{}],
            tableData8: [{}]
        }
    },
    watch: {
        isEdit() {
            if (this.$store.state.settings.mode == 'mobile') {
                this.show = false
            } else {
                this.show = true
            }
        },
        'major_id': {
            // 对数据进行深度监听，如果数据发生变化，就获取培育计划表中的数据并渲染到表格上
            handler: function() {
                console.log(this.major_id)
                this.tableData = []
                this.tableData2 = []
                this.tableData3 = []
                this.tableData4 = []
                this.tableData5 = []
                this.tableData6 = []
                this.tableData7 = []
                this.tableData8 = []
                var _this = this
                api.post('cultivationPlan/findByMajor', {
                    data: this.major_id})
                    .then(res => {
                        _this.tableData = res.data['大一（上学期）']
                        _this.tableData2 = res.data['大一（下学期）']
                        _this.tableData3 = res.data['大二（上学期）']
                        _this.tableData4 = res.data['大二（下学期）']
                        _this.tableData5 = res.data['大三（上学期）']
                        _this.tableData6 = res.data['大三（下学期）']
                        _this.tableData7 = res.data['大四（上学期）']
                        _this.tableData8 = res.data['大四（下学期）']
                    })
                this.reload
            },
            deep: true
        }
    },
    created() {
        if (this.$store.state.settings.mode == 'mobile') {
            this.show = false
        } else {
            this.show = true
        }
        api.post('major/findByStudentID', {
            account: this.$store.state.user.account})
            .then(res => {
                this.major = res.data.major[0]
                this.major_id = res.data.major_id
            })
        this.tableData = []
        this.tableData2 = []
        this.tableData3 = []
        this.tableData4 = []
        this.tableData5 = []
        this.tableData6 = []
        this.tableData7 = []
        this.tableData8 = []
    },
    mounted() {

    },
    methods: {
        aa() {
            console.log(this.major_id)
            this.tableData = []
            this.tableData2 = []
            this.tableData3 = []
            this.tableData4 = []
            this.tableData5 = []
            this.tableData6 = []
            this.tableData7 = []
            this.tableData8 = []
            var _this = this
            api.post('cultivationPlan/findByMajor', {
                data: this.major_id})
                .then(res => {
                    _this.tableData = res.data['大一（上学期）']
                    _this.tableData2 = res.data['大一（下学期）']
                    _this.tableData3 = res.data['大二（上学期）']
                    _this.tableData4 = res.data['大二（下学期）']
                    _this.tableData5 = res.data['大三（上学期）']
                    _this.tableData6 = res.data['大三（下学期）']
                    _this.tableData7 = res.data['大四（上学期）']
                    _this.tableData8 = res.data['大四（下学期）']
                })
        },
        indexMethod(index) {
            return index + 1
        },
        // eslint-disable-next-line no-unused-vars
        clickTable(row, index, e) {
            console.log(row.course_name)
            this.$refs.refTable.toggleRowExpansion(row)
        },
        getRowKey(row) {
            return row.staffTypeId
        }
    }
}
</script>
